<script setup lang="ts">
  import { useSlots, Slots, ref, onMounted } from 'vue'
  import { vLoading } from 'element-plus'
  import { ArrUtil } from '@xtail/core'
  import { IconType, IconsType, IconifyUtil } from '@xtail/vue3'
  import { XIconSet } from '../XIconSet'
  import { IconSetIconifyPropsType } from './types'

  defineOptions({
    name: 'XIconSetIconify'
  })

  const props = withDefaults(defineProps<IconSetIconifyPropsType>(), {
    filter: true,
    pagination: true
  })

  const value = defineModel<IconType>({ default: null })

  const slots: Slots = useSlots()

  const iconsLoaded = ref<IconsType | false>(false)
  const isLoading = ref(false)
  const loadIconSet = async () => {
    // 如果没有传入图标集，无需图标集加载处理
    if (!props.icons) {
      iconsLoaded.value = false
      return
    }
    // 如果传入的图标集就是加载处理之后的图标，也无需再次加载处理
    if (ArrUtil.isArr(props.icons)) {
      iconsLoaded.value = props.icons
      return
    }
    // 加载图标集
    if (isLoading.value) return
    isLoading.value = true
    iconsLoaded.value = await IconifyUtil.loadIcons(props.icons)
    isLoading.value = false
  }
  onMounted(async () => await loadIconSet())

  defineExpose({
    loadIconSet
  })
</script>

<template>
  <div v-loading="isLoading" class="x-icon-set-iconify">
    <x-icon-set
      v-bind="{
        size,
        filter,
        filterIptProps,
        filterBtnProps,
        filterClass,
        filterStyle,
        scrollbarProps,
        gridAutoFillColsProps,
        iconBtnProps,
        iconBtnSelectedProps,
        pagination,
        defaultPageSize,
        paginationProps,
        paginationScrollbarProps,
        paginationScrollbarClass,
        paginationScrollbarStyle,
        emptyProps,
        resultProps: iconsLoaded
          ? undefined
          : {
              icon: 'error',
              title: '图标集加载失败',
              subTitle: '',
              ...(resultProps ?? {})
            }
      }"
      v-model="value"
      :icons="iconsLoaded ? iconsLoaded : []"
    >
      <template v-if="slots['filter-ipt-prefix']" #filter-ipt-prefix>
        <slot name="filter-ipt-prefix" />
      </template>
      <template v-if="slots['filter-ipt-suffix']" #filter-ipt-suffix>
        <slot name="filter-ipt-suffix" />
      </template>
      <template v-if="slots['filter-ipt-prepend']" #filter-ipt-prepend>
        <slot name="filter-ipt-prepend" />
      </template>
      <template v-if="slots['filter-ipt-append']" #filter-ipt-append>
        <slot name="filter-ipt-append" />
      </template>
      <template v-if="slots['filter-btn-icon']" #filter-btn-icon>
        <slot name="filter-btn-icon" />
      </template>
      <template v-if="slots['search-result-icon']" #result-icon>
        <slot name="search-result-icon" />
      </template>
      <template v-if="slots['search-result-title']" #result-title>
        <slot name="search-result-title" />
      </template>
      <template v-if="slots['search-result-sub-title']" #result-sub-title>
        <slot name="search-result-sub-title" />
      </template>
      <template v-if="slots['search-result-extra']" #result-extra>
        <slot name="search-result-extra" />
      </template>
      <template v-if="slots['empty-bottom']" #empty-bottom>
        <slot name="empty-bottom" />
      </template>
      <template v-if="slots['empty-image']" #empty-image>
        <slot name="empty-image" />
      </template>
      <template v-if="slots['empty-description']" #empty-description>
        <slot name="empty-description" />
      </template>
    </x-icon-set>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
